.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-s);
    border-bottom: 5px solid var(--gray-border);
    margin-top: var(--space-s);
    padding-bottom: var(--space-l);
}

.hero-button {
    composes: yellow-button from '../styles/shared/buttons.module.css';

    .icon {
        color: #c4890e;
    }
}

.blurb {
    margin: var(--space-l) var(--space-s);
    display: flex;
    gap: var(--space-l);

    @media only screen and (max-width: 650px) {
        flex-direction: column;
        align-items: center;
    }
}

.intro {
    flex: 6;
    line-height: 1.5;
}

.stats {
    flex: 4;
    display: flex;
    flex-direction: column;

    > * + * {
        margin-top: var(--space-s);
    }
}

.lists {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-s);
    padding: 0 var(--space-s);

    @media only screen and (max-width: 750px) {
        grid-template-columns: 1fr 1fr;
    }

    @media only screen and (max-width: 550px) {
        grid-template-columns: 1fr;
    }

    h2 {
        font-size: 1.05rem;

        a:not(:hover) {
            color: var(--main-color);
        }
    }
}

.list {
    list-style: none;
    padding: 0;

    > * + * {
        margin-top: var(--space-2xs);
    }
}

.error-message {
    line-height: 1.5;
}

.try-again-button {
    composes: yellow-button from './shared/buttons.module.css';
    align-self: center;
    margin: var(--space-s) 0;

    .spinner {
        margin-left: var(--space-2xs);
    }
}
